<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:xf="http://www.w3.org/2002/xforms"
        xmlns:lsc="http://rjlg.com/labspaces/core#"
        xmlns:lsme="http://rjlg.com/labspaces/medicalexaminer#"
        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
        xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
        xmlns:foaf="http://xmlns.com/foaf/0.1/"
        xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>Themis</title>
    <link rel="apple-touch-icon" href="icon.png"/>
    <link rel="apple-touch-icon" sizes="72x72" href="icon.png"/>
    <link rel="apple-touch-icon" sizes="114x114" href="icon.png"/>
    <link rel="apple-touch-startup-image" href="startup.png"/>
    <link rel="stylesheet" href="/resources/flexigrid/css/flexigrid.pack.css"/>
    <link rel="stylesheet" href="/resources/jquery/jquery-ui-autocomplete.css"/>
    <link rel="stylesheet" href="/resources/jquery/jquery.mobile-1.0.min.css"/>
    <link rel="stylesheet" href="/resources/swift-xforms/css/xforms.css"/>
    <script src="/resources/jquery/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="/resources/flexigrid/js/flexigrid.pack.js"></script>
    <script type="text/javascript" src="/resources/jquery/jquery-ui-autocomplete.min.js"></script>
    <script src="/resources/jquery/jquery.mobile-1.0.min.js"></script>
    <script src="/resources/jquery/jquery.xmlns.js"></script>
    <script type="text/javascript" src="/resources/swift-xforms/js/jquery.xforms.js"></script>
</head> 

<body>
<script id="agent" type="text/xml" data-role="model">
        <xf:model>
            <xf:instance id="agents" src="/swift/services/agent"/>
            <xf:instance id="agent-out">
                <rdf:RDF>
                    <rdf:Description rdf:about="mrnew">
                        <lsc:nkey></lsc:nkey>
                        <foaf:name></foaf:name>
                    </rdf:Description>
                </rdf:RDF>
            </xf:instance>
            <xf:instance id="agent-request">
                <request>
                    <runMashup>
                         <agent>mranalyst</agent>
                     </runMashup>
                 </request>
            </xf:instance>
            <xf:instance id="new-agent">
                <rdf:RDF>
                    <rdf:Description rdf:about="mrnew">
                        <lsc:nkey></lsc:nkey>
                        <foaf:name></foaf:name>
                    </rdf:Description>
                </rdf:RDF>
            </xf:instance> 
            <xf:submission id="agent-submit" ref="instance('agent-request')/request/runMashup" instance="agent-out" method="post" resource="/swift/services/agent">
                <xf:message ev:event="xforms-submit-done">[agent-submit] successful!</xf:message>
            </xf:submission>
            <xf:submission id="agent-lookup" ref="instance('agent-request')/runMashup" instance="agents" method="post" resource="/swift/services/agent" mode="synchronous"/>
            <xf:submission id="new-agent-submit" instance="new-agent" method="get" resource="/swift/services/agent?agent=mrbooking" mode="synchronous"/>
            <xf:action for="agent-paste" ev:event="incremental-change paste">
                <xf:send submission="agent-submit"/>
            </xf:action>
            <xf:submission id="new-page" replace="all" method="get" ref="instance('agent-request')/runMashup" resource="/resources/swift-xforms/jQuery2.html"/>
            <xf:action for="beer" ev:event="click">
                <xf:send submission="new-agent-submit"/>
                <xf:setvalue ref="instance('new-agent')/rdf:RDF/@rdf:about"
                             value="instance('agent-out')/rdf:RDF/rdf:Description/lsc:nkey/."/>
                <xf:setvalue ref="instance('new-agent')/rdf:RDF/rdf:Description/lsc:nkey/."
                             value="instance('agent-out')/rdf:RDF/rdf:Description/lsc:nkey/."/>
                <xf:setvalue ref="instance('new-agent')/rdf:RDF/rdf:Description/foaf:name/."
                             value="instance('agent-out')/rdf:RDF/rdf:Description/foaf:name/."/>
                <xf:insert context="instance('agents')/rdf:RDF"
                           origin="instance('new-agent')/rdf:RDF/rdf:Description"/>
            </xf:action>
            <xf:action ev:observer="#email" ev:event="click">
                <xf:send submission="new-page"/>
            </xf:action>
            <xf:action for="skull" ev:event="click">
                <xf:delete
                        context="instance('agents')/rdf:RDF"
                        nodeset="rdf:Description"
                        at=":first"/>
            </xf:action>
            <xf:action ev:observer="#chat" ev:event="click">
                <xf:delete
                        context="instance('agents')/rdf:RDF"
                        nodeset="rdf:Description"
                        at=":last"/>
            </xf:action>
            <xf:message ev:event="xforms-model-construct-done">[Default model] constructed!</xf:message>
        </xf:model>
    
</script>
<div data-role="page" id="menu" data-title="Themis Agent Menu" data-theme="c" >
    <div data-role="header" data-position="default">
        <h1>Themis Agent Menu</h1>
    </div>

    <div data-role="content" data-theme="d" style="min-height: 640px">
        <ul data-role="listview">
            <li><a href="#SelectAgent" data-transition="slide">Select Agent</a></li>
            <li><a href="#AgentDetail" data-transition="slide">Agent Detail</a></li>
            <li><a href="#AgentGrid" data-transition="slide">Agent Grid</a></li>
        </ul>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div>
<div id="SelectAgent" data-role="page" data-title="Select Agent" >
    <div data-role="header" data-theme="f" data-position="default">
        <a href="#menu" data-icon="back" data-direction="reverse">Back</a>
		<h1>Agent Selection</h1>
        <a id="save" href="#" data-icon="save" data-direction="reverse" data-submission="agent-submit">Save</a>
	</div>
    <div data-role="content" data-theme="d"  style="min-height: 640px">
            <form id="testForm" action="#">
                <div id="group1" data-ref="instance('agent-request')/runMashup">
                    <fieldset>
                        <div data-role="fieldcontain">
                            <label for="agent-select" class="select">Select Agent:</label>
                            <select name="agent-select" id="agent-select" data-ref="agent" data-nodeset="instance('agents')/rdf:Description" data-submission="agent-submit">
                                <option value="true" data-ref="lsc:nkey" data-label="foaf:name"></option>
                            </select>
                        </div>
                        <div data-role="fieldcontain" class="ui-widget">
                            <label for="agent-lookup">Lookup Agent: </label>
                            <input id="agent-lookup" data-ref="agent" data-submission="agent-submit"/>
                            <ul for="agent-lookup" data-role="suggest" data-nodeset="instance('agents')/rdf:Description" data-submission="agent-lookup">
                                <li data-ref="lsc:nkey" data-label="foaf:name"/>
                            </ul>
                        </div>
                        <div data-role="fieldcontain">
                            <label for="agent-paste">Paste Id:</label>
                            <input name="agent-paste" id="agent-paste" data-ref="agent" data-incremental="true"/>
                        </div>
                    </fieldset>
                </div>
                <div id="group4" data-ref="instance('agent-out')/rdf:Description">
                    <div data-role="fieldcontain">
                        Agent Name: <output id="agent-out-name" data-ref="foaf:name"/>
                    </div>
                </div>
            </form> 
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar" data-grid="d" data-iconpos="top">
        <ul>
            <li><a href="#" id="chat"><img src="/resources/images/icons/standard/speechbubble.png" class="ui-li-icon"/> Chat</a></li>
            <li><a href="#" id="email"><img src="/resources/images/icons/standard/mailclosed.png" class="ui-li-icon"/> Email</a></li>
            <li><a href="#" id="skull" data-icon="mail">Danger</a></li>
            <li><a href="#" id="beer"><img src="/resources/images/icons/standard/plus.png" class="ui-li-icon"/> New</a></li>
            <li><a href="#" id="coffee" data-submission="agent-submit">Submit</a></li>
        </ul>
        </div>
    </div>
</div>
<div id="AgentDetail" data-role="page" data-title="Agent" >
    <div data-role="header" data-theme="f" data-position="default">
        <a href="#menu" data-icon="back" data-direction="reverse">Back</a>
        <h1>Agent</h1>
    </div>
    <div data-role="content" data-theme="d" style="min-height: 640px">
        <div data-role="content-primary">
            <form id="testForm2" action="#">
            <div id="group2" data-ref="instance('agent-out')/rdf:Description">
                <fieldset>
                    <div data-role="fieldcontain">
                        <label for="nkey1">Id: </label>
                        <input id="nkey1" type="text" data-ref="lsc:nkey"/>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="name1">Name: </label>
                        <input id="name1" type="text" data-ref="foaf:name" class="required streetAddress"/>
                    </div>
                </fieldset>
            </div>
            </form>
        </div>
    </div>
    <div  class="ui-body ui-body-b" data-role="footer" data-position="fixed">
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <button type="submit" data-theme="d">Cancel</button>
            </div>
            <div class="ui-block-b">
                <button type="submit" data-theme="a" data-submission="agent-submit">Submit</button>
            </div>
        </div>
    </div>
</div>
<div id="AgentGrid" data-role="page" data-title="Agent" >
    <div data-role="header" data-theme="f" data-position="default">
        <a href="#menu" data-icon="back" data-direction="reverse">Back</a>
        <h1>Agent Grid</h1>
    </div>
    <div data-role="content" data-theme="d" style="min-height: 640px">
        <div data-role="content-primary">
            <table id="agt" class="flexigrid">
                <thead>
                    <tr><th>ID</th><th>Name</th></tr>
                </thead>
                <tbody id="agtb" data-nodeset="instance('agents')/rdf:Description">
                    <tr>
                        <td><output id="tbKey" data-ref="lsc:nkey"/></td><td><input id="tbName" type="text" data-ref="foaf:name"/></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>